//这个就是高阶组件
//高阶组件本身是个组件，接收一个组件作为参 数,然后返回一个新组件

//高阶组件的用法
//高阶组件是不会去修改传入组件的state的，我们的高阶组件应该像纯函数那样去使用它
//1.属性代理//通过高阶组件包装传入的组件,将属性以props的形式传递给包装的组件
//2.反向继承//高阶组件，继承自传入的组件,在高阶组件中可以获得传入组件的state和方法和钩子函数
//3.劫持组件渲染
import React from 'react';
/**
 * 
 * @param {Function | Class} WrapComponet 传递过来需要包装的组件
 * @returns {Function | Component} 返回一个新的组件
 */
// 高阶函数之属性代理
function Suit(WrapComponet) { //在这个Suit函数中传入一个参数，然后返回一个组件
    return class SuitContainer extends React.Component{
        state={
            skill:'保家卫国',
            weapon:'笔墨',
            nickname:'大文豪'
        }
        attack(){
            alert('打死你个龟孙。。。')
        }
        render(){
            return(
                <WrapComponet {...this.state} attack={this.attack}/> 
                // 在这个组件中的{...this.state}表示的是将上面定义的状态传递给这个组件
            )
        }
    }
} 
export default Suit

// 高阶函数之反向继承
/* function InverationHoc(WrapComponent) {
    return class InverationHocContainer extends WrapComponent{ //继承的是WrapComponent,继承的是传过来的组件
       
        render() {
            console.log(this.state); //打印的结果是继承的组件的中的内容
            return ( 
                <WrapComponent />
            )
        }
    }
}
export default InverationHoc */